<template>
    <div class="art-container">
        <div class="art-box ">
            <div class="art-head ">

<!--                标题-->
                <div class="art-title" ref="title">
                   {{article.obj.aTitle}}

                    <!--                置顶图案-->
                    <div v-show="article.obj.aTop===1"
                         style="float: right;font-size: 16px;margin-right: 80px">
                        🔥置顶文章
                        <!--              备用图案  🔥🎆🌈      -->
                    </div>


                </div>

<!--                分类标签-->
                <div class="art-tab">
                    <i class="el-icon-collection-tag"></i>
                    分类 :
                    <el-tag :type="getTabColor" effect="dark" >
                        <router-link style="text-decoration: none;color: white"
                          :to="{
                            name:'tabArticles',
                            query:{
                                tId:article.tab.tId
                            }
                        }">
                            {{article.tab.tName}}
                        </router-link>

                    </el-tag>
                </div>

<!--                创建时间-->
                <div class="art-createTime">
                    <i class="el-icon-timer"></i>
                    创建时间 :
                    <span style="font-size: 20px;color: #C46223">
                         {{article.obj.aCreateTime}}
                    </span>

                    <!--                浏览量-->
                    <div style="float: right;margin-right: 250px">
                       <i class="el-icon-view"></i>
                        浏览量 :
                        <span style="color: #C46223;font-size: 20px">
                              {{article.obj.view}}
                        </span>

                    </div>
                </div>

            </div>

<!--            文章内容-->
            <div class="art-content-box" >
                <div v-html="article.obj.aContent" class="art-content">

                </div>
            </div>
        </div>
        <div class="art-bottom flex-center">
            <div class="last">
                <div v-if="article.last!=null">
                    <router-link :to="{
                         path:'ar',
                        query:{
                            aId:article.last.aId
                        }
                    }">
                        上一个 : {{article.last!=null? article.last.aTitle:'无'}}
                    </router-link>
                </div>

            </div>
            <div class="next">
                <div v-if="article.next!=null" >
                    <router-link :to="{
                        path:'ar',
                        query:{
                            aId:article.next.aId
                        }
                    }" style="overflow: hidden">
                      下一个 : {{article.next!=null? article.next.aTitle:'无'}}
                    </router-link>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import {useRoute} from "vue-router";
    import {computed, reactive, ref} from "@vue/reactivity";
    import axios from 'axios'
    import {onMounted} from "@vue/runtime-core";
    import {goTop} from "@/assets/js/utils";
    import service from '/src/assets/js/service'

    export default {
        name: "Article",
        setup(){
            let title=ref("")
            let article=reactive({
                obj:{},
                tab:{},
                last:{},
                next:{}
            })

            const tabColorList=['success','info','warning','danger']
            let getTabColor=computed(()=>{
                const index=Math.ceil(Math.random()*tabColorList.length)
                return tabColorList[index]
            })


            onMounted(()=>{
                goTop()
            })

            return{
                article,
                getTabColor,
                title
            }
        },
        async mounted() {

            // 路由取值
            const route=useRoute()
            // 只取aId
            const aId=Number(route.query.aId)
            if(aId!=null){
                // 先取本文
                const data=await getAxiosArticle(aId)
                const last=await getAxiosArticle(aId-1)
                const next=await getAxiosArticle(aId+1)
                service.addView(aId)
                if(data.code===200){
                    this.article.obj=data.data
                    this.article.tab=data.data.tab
                   this.article.last=last.data
                    this.article.next=next.data
                }
            }

        }
    }

  function getAxiosArticle(aId) {
      let token=sessionStorage.getItem("token")
      if(token!=null){
          return  axios.get('/api/article/id?id='+aId,{
              headers:{
                  token:sessionStorage.getItem("token")
              }
          }).then(resp=>resp.data)
      }else{
          return  axios.get('/api/article/id?id='+aId).then(resp=>resp.data)
      }

  }
</script>

<style scoped lang="less">
    @Content-width:90%;
    .art-container{
        width: 100%;
        min-height: 100%;
        background-color: var(--theme-color);


        display: flex;
        align-items: center;
        flex-direction: column;

        color: white;
        .art-box{
            width: 70%;
            min-height: 90%;
            margin-top: 30px;

            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 5px;


            .art-head{
                width: @Content-width;
                height: 200px;
                border: 2px solid #42b983;
                text-align: left;
                background-color: transparent;

                .art-title{
                    min-width: 200px;
                    overflow-x: hidden;
                    font-size: 30px;
                    margin:20px 10px 20px 20px;

                }
                .art-tab{

                    margin:20px 10px 20px 30px;
                }
                .art-createTime{
                    text-align: center;
                    margin:20px 10px 20px 30px;
                }
            }

            .art-content-box{

                width: @Content-width;
                text-align:left;
                margin-top: 30px;
                min-height: 1500px;
                border-radius: 5px;
                border: 2px solid #42b983;
                background-color: transparent;
                height: auto;

                display: flex;
                justify-content: center;
                .art-content{
                    width: 85%;
                    min-height: 90%;


                }



            }
        }

        .art-bottom{
            width: 100%;
            height: 70px;
            margin-bottom: 300px;
            .last{
                height: 50px;
                width: 300px;

                margin-top: 20px;
                margin-right: 500px;

                div{
                    float:right;
                    transition: all 0.5s;

                }

            }
            .next{
                height: 50px;
                width: 300px;

                margin-top: 20px;
                div{
                    float: left;
                    transition: all 0.5s;
                    overflow: hidden;

                }
            }

            .next div,.last div{
                height: 100%;
                width: 70%;
                overflow-x: hidden;
                border-bottom: 2px solid #42b983;
                overflow-wrap: break-word;
                word-break:keep-all; /* 不换行 */
                text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
                white-space:nowrap; /* 不换行 */
            }

            .next div:hover,.last div:hover{
                width: 100%;
                border-bottom: 2px solid tomato;

            }

            a{
                color: white;
                text-decoration: none;

            }

        }
    }



    ::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    }
    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*background: white;*/
        background-color: #242b39;
    }



</style>